<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding-bottom: 100px;
        }
        /**
        第一种方式
         */
        .mail:hover ul{
            display: block;
        }
        .list{
            display: none;
        }

    </style>
</head>
<body>
<h3>1,块级元素默认是没有高度的，需要内容撑开，块级元素独占一行，即使设置了宽度,行内元素一般不可以设置宽，高（有一些特殊的）</h3>
<div style="width: 200px;height: 100px;background-color: darkgrey"></div>
<span>aaa</span>
<hr>

<h3>2,display 用来切换 行内，和块级元素切换</h3>
<p>display :inline-block (可以设置宽高的行内元素),对齐方式是基线对齐</p>
<span style="display: inline-block;width:50px;height: 30px;background-color: lightslategray">aaaa</span>
<span style="display: inline-block;width: 80px;height: 50px;background-color: bisque">bbbb</span>
<hr>

<h3>3,行内元素没有宽高，其是由内容撑开的，如果想让其填满父元素，可以把其设置为块元素</h3>
<p>下面的例子可以把a 设置成块元素，其就会填满整个父元素（li）了</p>
<ul>
    <li style="width: 120px;background-color: bisque"><a style="display: block" href="www.baidu.com">aaaaaa</a></li>
    <li style="width: 120px;background-color: bisque"><a style="display: block" href="www.baidu.com">bbbbbb</a></li>
    <li style="width: 120px;background-color: bisque"><a style="display: block" href="www.baidu.com">cccccc</a></li>
</ul>
<hr>

<h3>4,鼠标移动到div 上 显示 其他元素 就用 :hover</h3>
<div class="mail">
    <div class="header" style="width: 150px;height: 50px;">移动鼠标显示列表</div>
    <ul class="list">
        <li>aaaaa</li>
        <li>aaaaa</li>
        <li>aaaaa</li>
    </ul>
</div>
<hr>

<h3>5,居中 分为水平居中 text-align:center 和 垂直居中 line-height:34px;</h3>
</body>
</html>